<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>舒尔特方格</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f0f0f0;
      margin: 0;
    }

    .schulte-grid {
      display: grid;
      grid-template-columns: repeat(5, 50px);
      grid-template-rows: repeat(5, 50px);
      gap: 10px;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      background-color: #e0e0e0;
      border-radius: 5px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .buttons {
      display: flex;
      gap: 10px;
    }

    .buttons button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

    .timer {
      font-size: 20px;
      font-weight: bold;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="schulte-grid" id="schulte-grid">
    <!-- 数字格子将由JavaScript动态生成 -->
  </div>
  <div class="buttons">
    <button id="refresh-btn">刷新</button>
    <button id="toggle-timer-btn">开始计时</button>
  </div>
  <div class="timer" id="timer">00:00.000</div>

  <script>
    // JavaScript代码
    const grid = document.getElementById('schulte-grid');
    const refreshBtn = document.getElementById('refresh-btn');
    const toggleTimerBtn = document.getElementById('toggle-timer-btn');
    const timerDisplay = document.getElementById('timer');

    let timerInterval;
    let elapsedTime = 0;
    let isTimerRunning = false;

    // 生成舒尔特方格
    function generateGrid () {
      grid.innerHTML = '';
      const numbers = Array.from({ length: 25 }, (_, i) => i + 1);
      numbers.sort(() => Math.random() - 0.5); // 随机打乱顺序
      numbers.forEach((num) => {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.textContent = num;
        grid.appendChild(cell);
      });
    }

    // 刷新按钮功能
    refreshBtn.addEventListener('click', () => {
      generateGrid();
      timerDisplay.textContent = '00:00.000'
      stopTimer(); // 刷新时停止计时器
    });

    // 切换计时器状态
    toggleTimerBtn.addEventListener('click', () => {
      if (isTimerRunning) {
        stopTimer();
      } else {
        startTimer();
      }
    });

    function startTimer () {
      elapsedTime = 0; // 重置计时
      timerInterval = setInterval(updateTimer, 10); // 每10毫秒更新一次
      toggleTimerBtn.textContent = '结束计时';
      isTimerRunning = true;
    }

    function stopTimer () {
      clearInterval(timerInterval);
      toggleTimerBtn.textContent = '开始计时';
      isTimerRunning = false;
    }

    function updateTimer () {
      elapsedTime += 10;
      const seconds = Math.floor(elapsedTime / 1000);
      const milliseconds = elapsedTime % 1000;
      timerDisplay.textContent = `00:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(3, '0')}`;
    }

    // 初始生成方格
    generateGrid();
  </script>
</body>

</html>